// Tab栏 通用组件
<template>
  <!-- 静态类名tab-item 动态类名current条件符合才存在 -->
  <!-- 这里cityId是来自于state仓库 -->
  <!-- 这里cityInfo.cityId 来自于父组件 -->
  <div
    @click="onTabClick(cityInfo)"
    :class="['tab-item', { current: cityInfo.cityId === cityId }]"
  >
    <span>{{ cityInfo.cityName }}</span>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";

export default {
  name: "TabSub",
  props: {
    cityInfo: Object,
  },
  computed: {
    ...mapState(["cityId"]),
  },
  methods: {
    //展开mapMutations里面的selectCity方法
    ...mapMutations(["selectCity"]),

    // 点击Tab栏名称更改state仓库里cityId的值
    onTabClick: function (cityInfo) {
      //cityInfo => { "cityId": "1", "cityName": "北京"}
      // 调用执行mutation.js里的selectCity()方法
      //selectCity()方法触发会更改cityName/cityId属性
      //这里实现了点击tab栏 全部/北京/上海/广州/深圳 数据实时更改为相应城市名称显示
      this.selectCity(cityInfo);
    },
  },
};
</script>

<style lang="scss" scoped>
@import "~styles/mixins.scss";
@import "~styles/variables.scss";

.tab-item {
  @include vh-center;
  flex: 1;
  height: 100%;
  font-size: 0.16rem;
  box-sizing: border-box;
  border-bottom: 2px solid #fff;

  &.current {
    color: $defaultGreen;
    border-color: $defaultGreen;
  }
}
</style>